// 路由api使用

// import { createRoot } from 'react-dom/client';
// import { createBrowserRouter, RouterProvider } from 'react-router-dom';
// import App from './App.tsx';
// import './index.css';

// const Demo = () => {
//   return <div>路由组件Demo</div>;
// };

// const router = createBrowserRouter(
//   [
//     {
//       path: '/',
//       element: <App />
//     },
//     {
//       path: '/demo',
//       element: <Demo />
//     }
//   ],
//   { basename: '/' }
// );

// createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);

// 路由组件使用
import { createRoot } from 'react-dom/client';
import { Routes, Route, HashRouter } from 'react-router-dom'; // BrowserRouter
import App from './App.tsx';
import './index.css';

const Demo = () => {
  return <div>路由组件Demo</div>;
};

// BrowserRouter 为history模式
// HashRouter  为hash模式
/*
`history`模式 (前台页面一般用这种模式，面向客户的页面)
history:createWebHistory(), //history模式
优点：`URL`更加美观，不带有`#`，更接近传统的网站`URL`。
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。

`hash`模式 (后台页面一般用这种模式，面向开发者的页面)
history:createWebHashHistory(), //hash模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：`URL`带有`#`不太美观，且在`SEO`优化方面相对较差。
*/
createRoot(document.getElementById('root')!).render(
  // <BrowserRouter>
  //   <Routes>
  //     <Route path='/' element={<App />} />
  //     <Route path='/demo' element={<Demo />} />
  //   </Routes>
  // </BrowserRouter>
  <HashRouter>
    <Routes>
      <Route path='/' element={<App />} />
      <Route path='/demo' element={<Demo />} />
    </Routes>
  </HashRouter>
);
